<template>
  <!-- 搜索按钮 -->
  <div id="searchInput" class="searchInputGroup">
    <div class="searchInput">
      <autoSelect2 placeholder="请输入场站名称" v-model="stationName" field="stationName" label="stationName" search-keys="stationName" :dataList="selectList" :dropAll="false" :width="'270px'" :top="'47px'"
                   :left="'-5px'"></autoSelect2>
    </div>
    <div class="searchIcon" style="cursor:pointer;" @click="searchStation">
      <Icon type="ios-search" size="24" color="#44C0FF"></Icon>
    </div>
  </div>
</template>

<script>
  import {getStationMemberList} from '@api/lightStation/station'
  import autoSelect2 from './autoSelect2.vue'

  export default {
    name: 'searchInput',
    data () {
      let stationName = ''
      let selectList = ''
      let datas = {stationName, selectList}
      return datas
    },
    props: {},
    computed: {},
    methods: {
      getSelectList () {
        getStationMemberList({}).then(res => {
          if (res.data.isSuccess === 1) {
            this.selectList = res.data.data
          }
        })
      },
      searchStation () {
        if (this.stationName) {
          let param = {stationName: this.stationName}
          this.$emit('clickSearch', param)
        } else {
          this.$emit('clickSearch', {})
        }
      }
    },
    mounted () {
      this.getSelectList()
    },
    components: {autoSelect2}
  }
</script>

<style>
  /*搜索*/
  .searchInputGroup {
    position: absolute;
    left: 50px;
    top: 20px;
    z-index: 200;
    width: 270px;
    height: 45px;
    background: #173A58;
    border: 1px solid #225D92;
    padding: 5px;
  }

  .searchInputGroup .searchInput {
    width: 85%;
    float: left;
  }

  .searchInputGroup .searchIcon {
    width: 15%;
    float: left;
    height: 32px;
    line-height: 32px;
    text-align: center;
    padding: 4px 0;
    border-left: 1px solid #225D92;
    position: relative;
    z-index: 300;
  }

  #searchInput .searchInput .ivu-select-input {
    padding: 0 8px;
    color: #fff;
    border: none;
  }

  #searchInput .ivu-select-visible .ivu-select-selection {
    border: none;
    box-shadow: none;
  }

  #searchInput .ivu-select:focus .ivu-select-selection {
    border: none;
    box-shadow: none;
  }

  #searchInput .ivu-select-selection {
    border: none;
  }

  #searchInput .searchInput .ivu-select-single .ivu-select-selection {
    background-color: transparent;
  }

  #searchInput .ivu-select-selection {
    width: 80%;
  }

  #searchInput .ivu-select-arrow {
    color: #306A87;
  }

  #searchInput .ivu-select-dropdown {
    top: 38px !important;
    left: -1px !important;
    border-radius: 0;
    border: 1px solid #225D92;
    background: #173A58;
    padding: 0;
  }

  #searchInput .ivu-select-item {
    color: #B8D9FF;
  }

  #searchInput .ivu-select-item:hover {
    color: #fff;
    background: #1E4667;
  }

  #searchInput .ivu-select-item-selected, #searchInput .ivu-select-item-selected:hover {
    color: #fff;
    background: #1E4667;
  }

  #searchInput .ivu-btn-primary {
    color: #66B7F2;
    background-color: #225D92;
    border: 2px solid #225D92;
  }

  #searchInput .buttonGroupActive {
    background-color: #173A58;
    border: 2px solid #225D92;
  }
</style>
